<!--
 * @Description: 我要保修
 * @Author: HeAo
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-03 15:07:22
-->
<template>
  <div>
    <div class="orderContent">
      <el-form :model="form">
        <el-form-item label="保修设备" label-width="120px">
          <el-cascader
            ref="cascaderAddr"
            v-model="casValue"
            :options="edTree"
            @change="casHandleChange"
            :props="props"
            clearable
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="问题描述" label-width="120px">
          <el-input type="textarea" v-model="form.bill_why"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="120px">
          <el-upload
            class="upload-demo"
            action="http://121.199.29.84:8001/file/upload"
            :on-success="imgHandleSuccess"
            :on-remove="imgHandleRemove"
            :on-exceed="imgOverLimitHandler"
            :file-list="fileList"
            list-type="picture"
            :limit="3"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-button style="float: right" type="primary" @click="toCommitHandler"
          >提交</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
import { get, postJSON } from "@/utils/request.js";
export default {
  data() {
    return {
      order: {},
      edTree: [],
      form: {},
      casValue: [],
      props: {
        value: "id",
        label: "name",
      },
      fileList: [],
    };
  },
  methods: {
    // 查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    // 级联面板change事件
    casHandleChange(val) {
      console.log(this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels);
      console.log(val);
      // 判断拿到的数组是否为空
      if (val) {
        this.form.engineer_id = val[0];
        this.form.device_id = val[1];
      }
    },
    // 图片成功上传的回调
    imgHandleSuccess(res) {
      let img = {
        name: res.data.fileName,
        url: "http://121.199.29.84:8888/group1/" + res.data.id,
      };
      this.fileList.push(img);
    },
    // 图片删除后的回调
    imgHandleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 图片上传超出上限的回调
    imgOverLimitHandler() {
      this.$message.warning("最多上传3张图片");
    },
    // 工单提交按钮点击事件
    toCommitHandler() {
      // if判断用户是否已上传3张图片
      if (this.fileList.length == 3) {
        // 将图片列表中的url遍历到form中对应字段中（p1,p2,p3）
        for (let i = 1; i < 4; i++) {
          this.form["p" + i] = this.fileList[i - 1].url;
        }
        // 后台接口交互
        postJSON("/workorder/repairOrder", this.form).then((res) => {
          // 提示成功
          this.$message.success("提交成功");
          // 跳转至工单列表页
          this.$router.push({
            path: "List",
          });
        });
      } else {
        this.$message.warning("请上传3张图片");
      }
    },
  },
  created() {
    this.order = this.$route.query;
    // 查询工程设备树
    this.findEngineerDeviceTree();
  },
};
</script>
<style scoped>
.orderContent {
  margin-top: 50px;
}
</style>
